<!-- 新增商家 -->
<template lang="html">
  <div class="TanContentBox" v-loading.body="loading">
      <el-form :model="form" id="form1">
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;" >
            <span>商家名：</span>
          </el-col>
          <el-col :span="6" >
            <el-input size="small" v-model="form.name" auto-complete="off" @blur="getParam" ></el-input>
          </el-col>
          <el-col :span="6">
            <span class="gray">最多12个汉字，字符算半个</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;" >
            <span >总公司：</span>
          </el-col>
          <el-col :span="6" v-show="!checked" >
            <el-select v-model="form.parentId" size="small" placeholder="请选择">
              <el-option
                v-for="item in parents"
                :key="item.value"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="10" v-show="checked" >
            <el-input size="small" v-model="form.parentName" placeholder="请输入一个总公司名(为空时默认已[总店]xx形式创建)"></el-input>
          </el-col>
          <el-col :span="2" style=" margin-left:10px; margin-top:5px;">
             <el-checkbox class="check" v-model="checked">创建总公司</el-checkbox>
          </el-col>
        </el-row>
        <el-row style="margin-bottom:10px;">
          <el-col :span="3" class="text-right" style="margin-bottom:10px;" >
            <span >商家类型：</span>
          </el-col>
          <el-col :span="21" class="text-left">
            <el-select v-model="form.value5" size="small" multiple placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.value"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <!-- <el-tag
              v-for="tag in tags"
              :key="tag.name"
              :closable="true"
              @close="handleClose(tag)"
              :type="tag.type">
              {{tag.name}}
            </el-tag>
            <span style="display:inline-block; width:100px;">
              <el-input
                style="margin-left:10px;"
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="mini"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
              >
              </el-input>
              <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ New Tag</el-button>
            </span> -->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" >
            <span >商家logo：</span>
          </el-col>
          <el-col :span="12" style="margin-bottom:10px;" >
            <el-upload
              class="upload-demo"
              :action="$store.state.url+'/v1/upload'"
              accept=".png,.jpeg,.jpg"
              :data="{path:'images'}"
              :before-upload="beforeUpload"
              :on-change="handleChange"
              :file-list="fileList2"
              name="files"
              :on-success="handleSuccess"
              list-type="picture">
              <el-button size="small" type="success" class="btn">点击上传</el-button>
              <span slot="tip" class="el-upload__tip">请上传500x500px，清晰正面logo</span>
            </el-upload>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;">
            <span >所在地：</span>
          </el-col>
          <el-col :span="4" >
            <el-select v-model="provinceCode" size="small" @change="getadd2" placeholder="请选择">
              <el-option
                v-for="(item,index) in options"
                :key="index"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" class="add" style="margin-left:10px;" >
            <el-select v-model="cityCode" size="small" @change="getadd3" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.name"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="4" class="add" style="margin-left:10px;">
            <el-select size="small" v-model="areaCode" placeholder="请选择">
              <el-option
                v-for="item in options3"
                :key="item"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;">
            <span >详细地址：</span>
          </el-col>
          <el-col :span="6" >
            <el-input size="small" v-model="form.address" auto-complete="off" ></el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" class="text-right" style="margin-bottom:10px;">
            <span >详细介绍：</span>
          </el-col>
          <el-col :span="8" >
            <el-input
              v-model="form.content"
              type="textarea"
              :rows="3"
              placeholder="请输入内容">
            </el-input>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="text-right" style="margin-top:10px;" >
            <el-button type="success" size="small" @click="sub">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
  </div>
</template>

<script>
import axios from "axios"
var url;
export default {
  data(){
    return{
      fileList2:[],
      checked:false,
      loading:false,
      inputVisible:false,
      inputValue: '',
      form: {
          name: "",
          zong:"",
          company:"",
          address:"",
          city:"",
          content:"",
          parentId:"",
          parentName:'',
          value5:''
      },
      parents:[],
      options:[],
      options2:[],
      options3:[],
      tags: [
          { name: '景区', type: 'gray' },
          { name: '酒店', type: 'gray' }
        ],
      tags2: [
          { name: '景区', type: 'gray' },
          { name: '酒店', type: 'gray' }
        ],
      provinceCode:'',
      cityCode:'' ,
      areaCode:'',
      fileName:'',

      typeList:['游玩','酒店','剧场','OTA','卡券','团体活动','教育培训']
    }
  },
  methods:{
    sub:function (){
      if(!this.checked&&this.form.parentId==''){
        this.$message({
          showClose: true,
          message: '请勾选总公司',
          type: 'error'
        });
        return;
      }
      var that=this;
      var str='';
      for(let i=0;i<that.form.value5.length;i++){
        str=str+that.form.value5[i]+',';
      }
      that.loading=true;
      //that.$store.dispatch('showLoading','TanMerchants');
      axios.get(url+'/v1/businessmen/post/businessmen', {
        params: {
          address:that.form.address,
        	areaCode:that.areaCode,
          cityCode:that.cityCode,
          logo:that.fileName,
          name:that.form.name,
          parentId:that.checked?'':that.form.parentId,
          parentName:that.checked?that.form.parentName:'',
          provinceCode:that.provinceCode,
          remark:that.form.content,
          typeNames:str
        }
      }).then(function (res) {
        if(res.data.code==0){
          that.loading=false;
          that.$message({
            showClose: true,
            message: '成功',
            type: 'success'
          });
          document.getElementById("form1").reset();
          that.form.parentName='';
          that.form.parentId='';
          that.form.value5=[];
          that.fileList2=[];
          that.provinceCode='';
          that.areaCode='';
          that.cityCode='';
          that.$store.dispatch('closeDialog','TanMerchants');
          var json1={
            cityCode:'',
            name:'',
            pageCount:10,
            pageIndex:1
          };
          that.$store.dispatch('getMerchantsSJ',json1);
        }else{
          that.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
          that.loading=false;
          //that.$store.dispatch('closeLoading','TanMerchants');
        }
      })
      .catch(function (err) {
      });
    },
    handleChange(file, fileList) {
      this.fileList2 = fileList.slice(-1);
    },
    handleSuccess:function (response, file, fileList){
      this.fileName=response.data[0];
    },
    beforeUpload (file) {
      if (this.fileList2.length > 1) {
        this.$message({
        type: 'error',
        message: '最多上传1张图片',
        duration: 1000
        })
        return false
      }
    },
    addChildren:function (){
    },
    handleClose(tag) {
       this.tags.splice(this.tags.indexOf(tag), 1);
     },
    handleClose2(tag) {
      this.tags2.splice(this.tags.indexOf(tag), 1);
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;

      if (inputValue) {
        let json={};
        json.name=inputValue;
        json.type='gray';
        this.tags.push(json);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
    getadd2:function (){
      axios.get(url+'/v1/comm/gets/city',{
         params:{
           'parentCode':this.provinceCode
         }
      }).then((res)=>{
         this.options2=res.data.data;
      }).catch((err)=>{
         this.$message({
           showClose: true,
           message: '错误:'+err,
           type: 'error'
         });
      })
    },
    getadd3:function (){
      axios.get(url+'/v1/comm/gets/city',{
         params:{
           'parentCode':this.cityCode
         }
      }).then((res)=>{
         this.options3=res.data.data;
      }).catch((err)=>{
         this.$message({
           showClose: true,
           message: '错误:'+err,
           type: 'error'
         });
      })
    },
    getParam:function (){
      var that = this;
      axios.get(url+'/v1/businessmen/gets/businessmen/findByParam',{
        params:{
          isParent:1,
          name:that.form.name
        }
      }).then((res)=>{
        if(that.checked){
          for(let i in res.data.data){

          }
        }else{
          that.parents=res.data.data;
        }
      }).catch((err)=>{
        console.log(err);
      })
    },
    getCity:function (){
      axios.get(url+'/v1/comm/gets/city',{
       params:{}
     }).then((res)=>{
       this.options=res.data.data;
     }).catch((err)=>{
       this.$message({
         showClose: true,
         message: '错误:'+err,
         type: 'error'
       });
     })
    }
  },
  created(){
    url=this.$store.state.url;
    this.getCity();
    this.getParam();
  }
}
</script>
<style>
  .TanContentBox .input-new-tag{display: inline;}
</style>
<style lang="Sass" scoped>
.TanContentBox{

  span{font-size: 13px; line-height: 30px;}
  .el-dialog--small{min-width: 650px;}
  .el-dialog__header{text-align: left;}
  .el-tag{line-height: 24px; margin-left: 10px;}
  .upload-demo{text-align: left;}
  .el-upload__tip{margin-left: 10px;}
}
</style>
